<template>
  <div class="my-padding">
    <el-form ref="form" :model="form" label-width="7rem">
      <el-form-item>
        <span slot="label">真实姓名</span>
        <el-input v-model="form.adminName" type="text" placeholder="请输入真实姓名，长度需大于两个字符"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">手&nbsp&nbsp机&nbsp&nbsp号</span>
        <el-input v-model="form.adminTel" type="text" placeholder="请输入11位手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">用&nbsp&nbsp户&nbsp&nbsp名</span>
        <el-input v-model="form.loginName" type="text" placeholder="请输入4到16位（字母，数字，下划线，减号）用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码</span>
        <el-input v-model="form.loginPass" type="password" placeholder="请输入至少六位字符的密码,可包含（-*/+.~!@#$%^&*()）"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">确认密码</span>
        <el-input v-model="confirmPass" type="password" placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAdmin">添加</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/accountSet";

  export default {
    data() {
      return {
        form: {
          adminName: "",
          adminTel: "",
          loginName: "",
          loginPass: "",
        },
        confirmPass: "",
      };
    },

    created() {

    },
    methods: {
      addAdmin() {
        if (!this.validate()) return;
        $.admAdd(this.form).then(response => {
          // console.log(response.data)
          if (response.data != 0) {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.$router.replace({
              path: "index",
            });
          } else {
            this.$message({
              type: "error",
              message: "添加失败，该手机号或用户名已存在"
            });
          }
        });
      },

      validate() {
        let error = "";
        if (!/^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/.test(this.form.adminName)) {
          error = "姓名长度必须为2-20个字符\n";
          this.form.adminName = ""
        } else if (!/^1[0-9]{10}$/.test(this.form.adminTel)) {
          error = "请输入正确的手机号\n";
          this.form.adminTel = ""
        } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(this.form.loginName)) {
          error = "请输入正确的用户名\n";
          this.form.loginName = ""
        } else if (!/^[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,}$/.test(this.form.loginPass)) {
          error = "请输入符合规则的密码\n";
          this.form.loginPass = ""
          this.confirmPass = ""
        } else if (this.form.loginPass != this.confirmPass) {
          error = "密码输入不一致,请重新输入"
          this.form.loginPass = ""
          this.confirmPass = ""
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      },

      back() {
        this.$router.replace({
          path: "index",
        })
      },
    }
  };
</script>

<style>
  .red {
    color: red;
    font-size: 1.5rem;
    vertical-align: middle;
  }
</style>
